<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>社交网站 - 多样式充值页面</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    /* 基础样式 */
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #f8fafc;
      color: #334155;
      min-height: 100vh;
      margin: 0;
      transition: all 0.3s;
    }
    
    .container {
      max-width: 540px;
      margin: 0 auto;
      padding: 0 15px;
    }
    
    /* 顶部导航 */
    .main-header {
      height: 56px;
      display: flex;
      align-items: center;
      padding: 0 15px;
      background-color: white;
      border-bottom: 1px solid #e2e8f0;
      position: relative;
      transition: all 0.3s;
    }
    
    .header-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0 auto;
    }
    
    .back-btn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: none;
      border: none;
      color: #64748b;
      font-size: 18px;
      cursor: pointer;
    }
    
    /* 余额信息 */
    .balance-section {
      padding: 25px 15px;
      text-align: center;
      transition: all 0.3s;
    }
    
    .balance-label {
      font-size: 15px;
      color: #64748b;
      margin-bottom: 8px;
      transition: all 0.3s;
    }
    
    .balance-amount {
      font-size: 32px;
      font-weight: 700;
      margin: 0 0 15px 0;
      transition: all 0.3s;
    }
    
    .currency-symbol {
      font-size: 20px;
      margin-right: 5px;
    }
    
    /* 充值金额选择 */
    .recharge-section {
      margin-bottom: 30px;
      transition: all 0.3s;
    }
    
    .section-title {
      font-size: 16px;
      font-weight: 600;
      margin: 0 0 15px 0;
      padding-left: 5px;
      transition: all 0.3s;
    }
    
    .amount-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 15px;
      margin-bottom: 20px;
    }
    
    .amount-item {
      background-color: white;
      border-radius: 12px;
      padding: 18px 10px;
      text-align: center;
      cursor: pointer;
      border: 2px solid #e2e8f0;
      transition: all 0.2s;
      position: relative;
    }
    
    .amount-item.selected {
      border-color: #0d6efd;
    }
    
    .amount-item.selected::after {
      content: '\f00c';
      font-family: 'FontAwesome';
      position: absolute;
      top: -8px;
      right: -8px;
      width: 24px;
      height: 24px;
      background-color: #0d6efd;
      color: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
    }
    
    .amount-value {
      font-size: 18px;
      font-weight: 600;
      margin: 0 0 5px 0;
    }
    
    .amount-desc {
      font-size: 12px;
      color: #94a3b8;
      margin: 0;
    }
    
    .custom-amount {
      width: 100%;
      padding: 15px;
      border-radius: 12px;
      border: 2px solid #e2e8f0;
      font-size: 16px;
      text-align: center;
      background-color: white;
      transition: all 0.2s;
    }
    
    .custom-amount:focus {
      outline: none;
      border-color: #0d6efd;
    }
    
    /* 支付方式 */
    .payment-methods {
      margin-bottom: 30px;
    }
    
    .method-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    
    .method-item {
      background-color: white;
      border-radius: 12px;
      padding: 15px;
      display: flex;
      align-items: center;
      cursor: pointer;
      border: 2px solid #e2e8f0;
      transition: all 0.2s;
      position: relative;
    }
    
    .method-item.selected {
      border-color: #0d6efd;
    }
    
    .method-item.selected::after {
      content: '\f00c';
      font-family: 'FontAwesome';
      position: absolute;
      right: 15px;
      color: #0d6efd;
      font-size: 20px;
    }
    
    .method-icon {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 15px;
      background-color: #f1f5f9;
    }
    
    .method-icon img {
      width: 24px;
      height: 24px;
      object-fit: contain;
    }
    
    .method-info {
      flex: 1;
    }
    
    .method-name {
      font-size: 16px;
      font-weight: 500;
      margin: 0 0 3px 0;
    }
    
    .method-desc {
      font-size: 12px;
      color: #94a3b8;
      margin: 0;
    }
    
    /* 充值按钮 */
    .recharge-btn {
      width: 100%;
      padding: 16px;
      background-color: #0d6efd;
      color: white;
      border: none;
      border-radius: 12px;
      font-size: 18px;
      font-weight: 600;
      cursor: pointer;
      margin-bottom: 15px;
      transition: all 0.3s;
    }
    
    .recharge-btn:disabled {
      background-color: #93c5fd;
      cursor: not-allowed;
    }
    
    .agreement {
      font-size: 12px;
      color: #94a3b8;
      text-align: center;
      margin: 0 0 30px 0;
    }
    
    .agreement a {
      color: #0d6efd;
      text-decoration: none;
    }
    
    /* 样式切换器 */
    .style-switcher {
      position: fixed;
      top: 15px;
      right: 15px;
      z-index: 1000;
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      padding: 10px;
      border: 1px solid #e9ecef;
      transition: all 0.3s;
    }
    
    .switch-label {
      font-size: 13px;
      margin-bottom: 8px;
      display: block;
      font-weight: 500;
    }
    
    .style-options {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    
    .style-btn {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      border: 2px solid transparent;
      cursor: pointer;
      transition: all 0.2s;
    }
    
    .style-btn.active {
      border-color: #0d6efd;
      transform: scale(1.1);
    }
    
    /* 提示框 */
    .toast {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      background-color: rgba(0,0,0,0.8);
      color: white;
      border-radius: 8px;
      padding: 10px 15px;
      font-size: 14px;
      z-index: 10000;
      display: none;
    }
    
    /* 样式1 - 经典蓝 */
    .style-1 .balance-section {
      background-color: #f0f9ff;
    }
    
    .style-1 .amount-item:hover {
      border-color: #93c5fd;
    }
    
    .style-1 .method-item:hover {
      border-color: #93c5fd;
    }
    
    .style-1 .recharge-btn {
      background-color: #0d6efd;
    }
    
    .style-1 .style-btn:nth-child(1) {
      background-color: #0d6efd;
    }
    
    /* 样式2 - 卡片式 */
    .style-2 {
      background-color: #f5f5f5;
    }
    
    .style-2 .main-header {
      background-color: #f5f5f5;
      border-bottom: none;
    }
    
    .style-2 .card {
      background-color: white;
      border-radius: 20px;
      padding: 20px;
      margin-bottom: 15px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }
    
    .style-2 .balance-section {
      background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
      border-radius: 20px;
      margin: 15px 0;
    }
    
    .style-2 .amount-item {
      box-shadow: 0 2px 5px rgba(0,0,0,0.05);
      border: none;
    }
    
    .style-2 .amount-item.selected {
      box-shadow: 0 0 0 2px #3b82f6;
    }
    
    .style-2 .method-item {
      box-shadow: 0 2px 5px rgba(0,0,0,0.05);
      border: none;
    }
    
    .style-2 .method-item.selected {
      box-shadow: 0 0 0 2px #3b82f6;
    }
    
    .style-2 .recharge-btn {
      background-color: #3b82f6;
      box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    }
    
    .style-2 .style-btn:nth-child(2) {
      background-color: #e5e7eb;
    }
    
    /* 样式3 - 深色模式 */
    .style-3 {
      background-color: #0f172a;
      color: #f8fafc;
    }
    
    .style-3 .main-header {
      background-color: #1e293b;
      border-bottom-color: #334155;
    }
    
    .style-3 .back-btn {
      color: #94a3b8;
    }
    
    .style-3 .balance-section {
      background-color: #1e293b;
    }
    
    .style-3 .balance-label,
    .style-3 .amount-desc,
    .style-3 .method-desc,
    .style-3 .agreement {
      color: #94a3b8;
    }
    
    .style-3 .amount-item {
      background-color: #1e293b;
      border-color: #334155;
    }
    
    .style-3 .amount-item.selected {
      border-color: #60a5fa;
    }
    
    .style-3 .amount-item.selected::after {
      background-color: #60a5fa;
    }
    
    .style-3 .custom-amount {
      background-color: #1e293b;
      border-color: #334155;
      color: white;
    }
    
    .style-3 .custom-amount:focus {
      border-color: #60a5fa;
    }
    
    .style-3 .method-item {
      background-color: #1e293b;
      border-color: #334155;
    }
    
    .style-3 .method-item.selected {
      border-color: #60a5fa;
    }
    
    .style-3 .method-item.selected::after {
      color: #60a5fa;
    }
    
    .style-3 .method-icon {
      background-color: rgba(255,255,255,0.1);
    }
    
    .style-3 .recharge-btn {
      background-color: #3b82f6;
    }
    
    .style-3 .agreement a {
      color: #93c5fd;
    }
    
    .style-3 .style-switcher {
      background-color: #1e293b;
      border-color: #334155;
    }
    
    .style-3 .switch-label {
      color: #e2e8f0;
    }
    
    .style-3 .style-btn:nth-child(3) {
      background-color: #1e293b;
      border: 1px solid #60a5fa;
    }
    
    /* 样式4 - 强调色块 */
    .style-4 .main-header {
      background-color: #8b5cf6;
      color: white;
      border-bottom: none;
    }
    
    .style-4 .back-btn {
      color: white;
    }
    
    .style-4 .balance-section {
      background-color: white;
      border-radius: 16px;
      margin: 20px 0;
      box-shadow: 0 4px 15px rgba(139, 92, 246, 0.1);
    }
    
    .style-4 .balance-amount {
      color: #8b5cf6;
    }
    
    .style-4 .amount-item {
      border: none;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    
    .style-4 .amount-item.selected {
      border-color: #8b5cf6;
      background-color: #f5f3ff;
    }
    
    .style-4 .amount-item.selected::after {
      background-color: #8b5cf6;
    }
    
    .style-4 .method-item {
      border: none;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    
    .style-4 .method-item.selected {
      border-color: #8b5cf6;
      background-color: #f5f3ff;
    }
    
    .style-4 .method-item.selected::after {
      color: #8b5cf6;
    }
    
    .style-4 .recharge-btn {
      background-color: #8b5cf6;
      box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
    }
    
    .style-4 .agreement a {
      color: #8b5cf6;
    }
    
    .style-4 .style-btn:nth-child(4) {
      background-color: #8b5cf6;
    }
    
    /* 样式5 - 极简风格 */
    .style-5 {
      background-color: white;
    }
    
    .style-5 .main-header {
      border-bottom: 1px solid #f1f1f1;
    }
    
    .style-5 .balance-section {
      padding: 15px;
    }
    
    .style-5 .balance-amount {
      font-size: 28px;
    }
    
    .style-5 .section-title {
      font-size: 15px;
      color: #666;
    }
    
    .style-5 .amount-grid {
      gap: 10px;
    }
    
    .style-5 .amount-item {
      border-radius: 8px;
      padding: 15px 10px;
      border: 1px solid #eee;
    }
    
    .style-5 .amount-item.selected {
      border-color: #333;
    }
    
    .style-5 .amount-item.selected::after {
      background-color: #333;
    }
    
    .style-5 .custom-amount {
      border-radius: 8px;
      border: 1px solid #eee;
    }
    
    .style-5 .method-item {
      border-radius: 8px;
      border: 1px solid #eee;
    }
    
    .style-5 .method-item.selected {
      border-color: #333;
    }
    
    .style-5 .method-item.selected::after {
      color: #333;
    }
    
    .style-5 .recharge-btn {
      background-color: #333;
      border-radius: 8px;
    }
    
    .style-5 .agreement a {
      color: #333;
    }
    
    .style-5 .style-btn:nth-child(5) {
      background-color: #333;
    }
  </style>
</head>
<body class="style-1">
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <span class="switch-label">选择样式</span>
    <div class="style-options">
      <button class="style-btn active" data-style="1" title="经典蓝"></button>
      <button class="style-btn" data-style="2" title="卡片式"></button>
      <button class="style-btn" data-style="3" title="深色模式"></button>
      <button class="style-btn" data-style="4" title="强调色块"></button>
      <button class="style-btn" data-style="5" title="极简风格"></button>
    </div>
  </div>
  
  <!-- 提示框 -->
  <div class="toast" id="toast"></div>
  
  <div class="container">
    <!-- 顶部导航 -->
    <header class="main-header">
      <button class="back-btn" id="backBtn">
        <i class="fa fa-angle-left"></i>
      </button>
      <div class="header-title">账户充值</div>
    </header>
    
    <!-- 内容区域 -->
    <div class="content">
      <!-- 样式2的卡片容器 -->
      <div class="style-2-content">
        <!-- 余额信息 -->
        <div class="balance-section">
          <p class="balance-label">当前余额</p>
          <p class="balance-amount">
            <span class="currency-symbol">¥</span>128.50
          </p>
        </div>
        
        <!-- 充值金额选择 -->
        <div class="recharge-section style-2-card card">
          <h3 class="section-title">选择充值金额</h3>
          
          <div class="amount-grid">
            <div class="amount-item" data-amount="30">
              <p class="amount-value">¥30</p>
              <p class="amount-desc">300积分</p>
            </div>
            <div class="amount-item" data-amount="50">
              <p class="amount-value">¥50</p>
              <p class="amount-desc">520积分</p>
            </div>
            <div class="amount-item" data-amount="100">
              <p class="amount-value">¥100</p>
              <p class="amount-desc">1050积分</p>
            </div>
            <div class="amount-item" data-amount="200">
              <p class="amount-value">¥200</p>
              <p class="amount-desc">2150积分</p>
            </div>
            <div class="amount-item" data-amount="500">
              <p class="amount-value">¥500</p>
              <p class="amount-desc">5500积分</p>
            </div>
            <div class="amount-item" data-amount="1000">
              <p class="amount-value">¥1000</p>
              <p class="amount-desc">11200积分</p>
            </div>
          </div>
          
          <input type="number" class="custom-amount" placeholder="其他金额">
        </div>
        
        <!-- 支付方式 -->
        <div class="payment-methods style-2-card card">
          <h3 class="section-title">选择支付方式</h3>
          
          <div class="method-list">
            <div class="method-item" data-method="wechat">
              <div class="method-icon">
                <i class="fa fa-weixin" style="font-size:24px;color:#07C160;"></i>
              </div>
              <div class="method-info">
                <p class="method-name">微信支付</p>
                <p class="method-desc">推荐微信用户使用</p>
              </div>
            </div>
            <div class="method-item" data-method="alipay">
              <div class="method-icon">
                <i class="fa fa-credit-card" style="font-size:24px;color:#1677FF;"></i>
              </div>
              <div class="method-info">
                <p class="method-name">支付宝</p>
                <p class="method-desc">推荐支付宝用户使用</p>
              </div>
            </div>
            <div class="method-item" data-method="card">
              <div class="method-icon">
                <i class="fa fa-university" style="font-size:24px;color:#666;"></i>
              </div>
              <div class="method-info">
                <p class="method-name">银行卡支付</p>
                <p class="method-desc">支持多种银行卡</p>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 充值按钮 -->
        <button class="recharge-btn" id="rechargeBtn" disabled>确认充值</button>
        <p class="agreement">
          点击充值即表示您同意<a href="#">《充值服务协议》</a>和<a href="#">《隐私政策》</a>
        </p>
      </div>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 获取元素
    const styleBtns = document.querySelectorAll('.style-btn');
    const amountItems = document.querySelectorAll('.amount-item');
    const customAmount = document.querySelector('.custom-amount');
    const methodItems = document.querySelectorAll('.method-item');
    const rechargeBtn = document.getElementById('rechargeBtn');
    const backBtn = document.getElementById('backBtn');
    const toast = document.getElementById('toast');
    
    let selectedAmount = null;
    let selectedMethod = null;
    
    // 初始化页面结构（处理样式2的卡片结构）
    function initPageStructure() {
      const style2Content = document.querySelector('.style-2-content');
      const rechargeSection = document.querySelector('.recharge-section');
      const paymentMethods = document.querySelector('.payment-methods');
      
      // 移除样式2的卡片类
      rechargeSection.classList.remove('style-2-card', 'card');
      paymentMethods.classList.remove('style-2-card', 'card');
      
      // 对于样式2，添加卡片类
      if (document.body.classList.contains('style-2')) {
        rechargeSection.classList.add('style-2-card', 'card');
        paymentMethods.classList.add('style-2-card', 'card');
      }
    }
    
    // 金额选择
    amountItems.forEach(item => {
      item.addEventListener('click', function() {
        // 清除其他选中状态
        amountItems.forEach(i => i.classList.remove('selected'));
        // 清除自定义金额
        customAmount.value = '';
        
        // 设置当前选中
        this.classList.add('selected');
        selectedAmount = this.getAttribute('data-amount');
        
        // 检查是否可以启用充值按钮
        checkRechargeBtn();
      });
    });
    
    // 自定义金额
    customAmount.addEventListener('input', function() {
      if (this.value) {
        // 清除其他选中状态
        amountItems.forEach(i => i.classList.remove('selected'));
        selectedAmount = this.value;
      } else {
        selectedAmount = null;
      }
      
      // 检查是否可以启用充值按钮
      checkRechargeBtn();
    });
    
    // 支付方式选择
    methodItems.forEach(item => {
      item.addEventListener('click', function() {
        // 清除其他选中状态
        methodItems.forEach(i => i.classList.remove('selected'));
        
        // 设置当前选中
        this.classList.add('selected');
        selectedMethod = this.getAttribute('data-method');
        
        // 检查是否可以启用充值按钮
        checkRechargeBtn();
      });
    });
    
    // 检查是否可以启用充值按钮
    function checkRechargeBtn() {
      if (selectedAmount && selectedMethod) {
        rechargeBtn.disabled = false;
      } else {
        rechargeBtn.disabled = true;
      }
    }
    
    // 充值按钮点击事件
    rechargeBtn.addEventListener('click', function() {
      const methodName = document.querySelector(`.method-item[data-method="${selectedMethod}"] .method-name`).textContent;
      showToast(`即将使用${methodName}充值¥${selectedAmount}`);
    });
    
    // 返回按钮点击事件
    backBtn.addEventListener('click', function() {
      showToast('返回上一页');
    });
    
    // 切换样式
    styleBtns.forEach(btn => {
      btn.addEventListener('click', function() {
        // 移除所有活跃状态
        styleBtns.forEach(b => b.classList.remove('active'));
        document.body.className = '';
        
        // 添加当前样式
        this.classList.add('active');
        const style = this.getAttribute('data-style');
        document.body.classList.add(`style-${style}`);
        
        // 重新初始化页面结构
        initPageStructure();
        
        // 重置选择状态
        resetSelections();
        
        showToast(`已切换到${this.title}样式`);
      });
    });
    
    // 重置选择状态
    function resetSelections() {
      amountItems.forEach(i => i.classList.remove('selected'));
      methodItems.forEach(i => i.classList.remove('selected'));
      customAmount.value = '';
      selectedAmount = null;
      selectedMethod = null;
      rechargeBtn.disabled = true;
    }
    
    // 显示提示
    function showToast(message) {
      toast.textContent = message;
      toast.style.display = 'block';
      
      setTimeout(() => {
        toast.style.display = 'none';
      }, 2000);
    }
    
    // 初始化
    initPageStructure();
  </script>
</body>
</html>
